<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title id="divTitle"> 添加中药 </title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑',serif;
    }
  </style>
  <script src="/js/jquery-1.10.2.min.js"></script>
  <script src="/js/jquery.form.js"></script>
  <script src="/js/generic.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.iframe-transport.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.fileupload.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-process.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-validate.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.fileupload-ui.js"></script>
  <script type="text/javascript">
  </script>
</head>

<body>

<table class="maintable">
  <tr>
    <td class="rightmaintd" valign="top">
      <div style="width:920px;margin:10px auto;"> <a href="/zyxx">&lt;  返回</a> </div>
      <table class="logintable" cellpadding="8" style="margin-top:20px;">
        <tr>
          <td class="lefttdtable"  valign="top" style="width:50%;">
            <table cellpadding="6">
              <tr>
                <td class="tdname">中药名</td>
                <td><input type="text" id="yaoming" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">拉丁名</td>
                <td><input type="text" id="ladingming" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">标准药物名</td>
                <td><input type="text" id="StandardMedicineName" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">药物分类名</td>
                <td><input type="text" id="MedicineClassifyName" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">药物异名</td>
                <td><input type="text" id="bieming" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">处方名</td>
                <td><input type="text" id="chufangming" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">药物类型</td>
                <td>
                  <select id="yaowuleixing" class="textselect">
                    <option value="">请选择</option>
                    <option value="自然界-水">自然界-水</option>
                    <option value="自然界-土,矿物,矿石类">自然界-土,矿物,矿石类</option>
                    <option value="植物-根">植物-根</option>
                    <option value="植物-茎">植物-茎</option>
                    <option value="植物-块茎">植物-块茎</option>
                    <option value="植物-皮">植物-皮</option>
                    <option value="植物-树皮">植物-树皮</option>
                    <option value="植物-根皮">植物-根皮</option>
                    <option value="植物-树脂">植物-树脂</option>
                    <option value="植物-分泌物">植物-分泌物</option>
                    <option value="植物-叶">植物-叶</option>
                    <option value="植物-叶">植物-叶柄</option>
                    <option value="植物-花">植物-花</option>
                    <option value="植物-花粉">植物-花粉</option>
                    <option value="植物-花蕊">植物-花蕊</option>
                    <option value="植物-蕾">植物-蕾</option>
                    <option value="植物-托">植物-托</option>
                    <option value="植物-种子">植物-种子</option>
                    <option value="植物-仁">植物-仁</option>
                    <option value="植物-果实">植物-果实</option>
                    <option value="植物-肉">植物-肉</option>
                    <option value="植物-全草或地上部分">植物-全草或地上部分</option>
                    <option value="植物-其它">植物-其它</option>
                    <option value="动物-肉">动物-肉</option>
                    <option value="动物-内脏">动物-内脏</option>
                    <option value="动物-皮">动物-皮</option>
                    <option value="动物-贝壳">动物-贝壳</option>
                    <option value="动物-甲类">动物-甲类</option>
                    <option value="动物-毛">动物-毛</option>
                    <option value="动物-结石">动物-结石</option>
                    <option value="动物-胆汁">动物-胆汁</option>
                    <option value="动物-胶">动物-胶</option>
                    <option value="动物-胎盘">动物-胎盘</option>
                    <option value="动物-生殖器">动物-生殖器</option>
                    <option value="动物-全本">动物-全本</option>
                    <option value="动物-角">动物-角</option>
                    <option value="动物-骨骼">动物-骨骼</option>
                    <option value="动物-牙齿">动物-牙齿</option>
                    <option value="动物-化石">动物-化石</option>
                    <option value="动物-其它">动物-其它</option>
                    <option value="真菌">真菌</option>
                    <option value="菌核">菌核</option>
                    <option value="复合类">复合类</option>
                    <option value="加工类">加工类</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">是否食用</td>
                <td>
                  <select id="shifoushiyong" class="textselect">
                    <option value="">请选择</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tdname">产地</td>
                <td><input type="text" id="chandi" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">出处</td>
                <td><input type="text" id="chuchu" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">炮制</td>
                <td><input type="text" id="paozhi" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname">药效类别</td>
                <td><input type="text" id="yaoxiaoleibie" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">性</td>
                <td>
                  <input type="checkbox" name="xing" value="寒" />寒&nbsp;
                  <input type="checkbox" name="xing" value="凉" />凉&nbsp;
                  <input type="checkbox" name="xing" value="温" />温&nbsp;
                  <input type="checkbox" name="xing" value="热" />热&nbsp;
                  <input type="checkbox" name="xing" value="平" />平&nbsp;
                  <input type="checkbox" name="xing" value="微寒" />寒&nbsp;
                  <input type="checkbox" name="xing" value="微凉" />微凉&nbsp;
                  <input type="checkbox" name="xing" value="微温" />微温&nbsp;
                  <input type="checkbox" name="xing" value="微热" />微热&nbsp;
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">味</td>
                <td>
                  <input type="checkbox" name="wei" value="辛">辛 &nbsp;
                  <input type="checkbox" name="wei" value="甘">甘 &nbsp;
                  <input type="checkbox" name="wei" value="苦">苦 &nbsp;
                  <input type="checkbox" name="wei" value="酸">酸 &nbsp;
                  <input type="checkbox" name="wei" value="咸">咸 &nbsp;
                  <input type="checkbox" name="wei" value="淡">淡 &nbsp;
                  <input type="checkbox" name="wei" value="涩">涩 &nbsp;
                  <input type="checkbox" name="wei" value="微苦">微苦 &nbsp;
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">归经</td>
                <td>
                  <input type="checkbox" name="guijing" value="心经">心经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="肝经">肝经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="脾经">脾经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="肺经">肺经&nbsp;&nbsp;&nbsp;  <br />
                  <input type="checkbox" name="guijing" value="肾经">肾经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="胃经">胃经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="胆经">胆经&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="膀胱经">膀胱经&nbsp;&nbsp;&nbsp;  <br />
                  <input type="checkbox" name="guijing" value="三焦经">三焦经
                  <input type="checkbox" name="guijing" value="心包经">心包经
                  <input type="checkbox" name="guijing" value="大肠经">大肠经
                  <input type="checkbox" name="guijing" value="小肠经">小肠经&nbsp;&nbsp;&nbsp;  <br />
                  <input type="checkbox" name="guijing" value="任脉">任脉&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="督脉">督脉&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="冲脉">冲脉&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="checkbox" name="guijing" value="带脉">带脉&nbsp;&nbsp;&nbsp;  <br />
                </td>
              </tr>
              <tr>
                <td class="tdname" valign="top">所治症状</td>
                <td valign="top">
                  <input type="text" id="zhengzhuang" class="textinput_ai" onclick="searchData()" onkeypress="addCheck(event)" oninput="searchData()">
                  <input type="button" value="添 加" onclick="add();" class="tianjiabtn">
                  <!-- 显示查询结果的区域 -->
                  <ul id="searchResults" class="searchResults" style="display: none"></ul>
                  <input type="button" value="清 空" onclick="clearShow();" class="tianjiabtn">


                  </div>

                  <label class="showAdd" id="showAdd"> </label>
                </td>
              </tr>
            </table>
          </td>
          <td class="righttdtable"  valign="top" style="width:50%;">
            <table cellpadding="6">
              <tr>
                <td class="tdname" valign="top">中药图片</td>
                <td style="border:1px solid black">
                  <img src="/images/zhongyao.png"  id="img" alt="" class="zhongyaopic"> <br />
                  <div class="fileUpload">
                    <span id="spSmallImage"> 上传中药图片 </span>
                    <input type="file" id="smallfile" name="smallfile" class="upload" onchange="previewImage()"/>
                    <input type="hidden" id="hidSmallPic" value="" />
                  </div>
                </td>
              </tr>
              <tr>
                <td class="tdname">毒性</td>
                <td><input type="text" id="duxing" class="textinput" maxlength="50"></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">功能/功效</td>
                <td><textarea id="gongneng" rows="" cols="" class="textareainput"></textarea></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">主治</td>
                <td> <textarea id="zhuzhi" rows="" cols="" class="textareainput"></textarea></td>
              </tr>
              <tr>
                <td class="tdname" valign="top">用法用量</td>
                <td> <textarea id="yongfayongliang" rows="" cols="" class="textareainput"></textarea></td>
              </tr>
            </table>
          </td>
        </tr>
        <div class="shenhediv">
          <input type="button" value="创 &nbsp; &nbsp; 建" class="baocunbtn" id="Sbtn" onclick="save()" style="display:block;float:left">
        </div>
      </table>
    </td>
  </tr>
</table>

</body>
</html>
<script type="text/javascript">
  var showAdd = document.getElementById('showAdd');
  var zhengzhuang=document.getElementById('zhengzhuang');
  var jsonData=null;
  function save(){
    var yaoming = document.getElementById('yaoming').value;
    if(yaoming==""){
      alert("请输入中药名！");
      return;
    }
    var ladingming = document.getElementById('ladingming').value;
    if(ladingming=="")
      ladingming=null;
    var StandardMedicineName=document.getElementById('StandardMedicineName').value;
    if(StandardMedicineName=="")
      StandardMedicineName=null;
    var MedicineClassifyName = document.getElementById('MedicineClassifyName').value;
    if(MedicineClassifyName=="")
      MedicineClassifyName=null;
    var bieming = document.getElementById('bieming').value;
    if(bieming=="")
      bieming=null;
    var chufangming = document.getElementById('chufangming').value;
    if(chufangming=="")
      chufangming=null;
    var yaowuleixing=document.getElementById('yaowuleixing').value;
    console.log(yaowuleixing);
    if(yaowuleixing=="")
      yaowuleixing=null;
    var shifoushiyong = document.getElementById('shifoushiyong').value;
    if(shifoushiyong=="")
      shifoushiyong=null;
    var chandi = document.getElementById('chandi').value;
    if(chandi=="")
      chandi=null;
    var chuchu=document.getElementById('chuchu').value;
    if(chuchu=="")
      chuchu=null;
    var paozhi = document.getElementById('paozhi').value;
    if(paozhi=="")
      paozhi=null;
    var yaoxiaoleibie = document.getElementById('yaoxiaoleibie').value;
    if(yaoxiaoleibie=="")
      yaoxiaoleibie=null;
    var checkboxXing= document.querySelectorAll('input[type="checkbox"][name="xing"]');
    var xing = "";
    checkboxXing.forEach(function (checkbox) {
      if(checkbox.checked){
        xing = xing + checkbox.value + ",";
      }
    });
    if(xing=="")
      xing=null;
    var checkboxWei= document.querySelectorAll('input[type="checkbox"][name="wei"]');
    var wei = "";
    checkboxWei.forEach(function (checkbox) {
      if(checkbox.checked){
        wei = wei + checkbox.value + ",";
      }
    });
    if(wei=="")
      wei=null;
    var checkboxGuijing= document.querySelectorAll('input[type="checkbox"][name="guijing"]');
    var guijing = "";
    checkboxGuijing.forEach(function (checkbox) {
      if(checkbox.checked){
        guijing = guijing + checkbox.value + ",";
      }
    });
    if(guijing=="")
      guijing=null;
    var zhenzhuang=document.getElementById('showAdd').textContent;
    if(zhenzhuang=="")
      zhenzhuang=null;
    var duxing = document.getElementById('duxing').value;
    if(duxing=="")
      duxing=null;
    var gongneng = document.getElementById('gongneng').value;
    if(gongneng=="")
      gongneng=null;
    var zhuzhi=document.getElementById('zhuzhi').value;
    if(zhuzhi=="")
      zhuzhi=null;
    var yongfayongliang=document.getElementById('yongfayongliang').value;
    if(yongfayongliang=="")
      yongfayongliang=null;
    // 创建要发送的数据对象，不包括文件
    var data = {
      yaoming: yaoming,
      ladingming: ladingming,
      standardMedicineName: StandardMedicineName,
      medicineClassifyName: MedicineClassifyName,
      bieming: bieming,
      chufangming: chufangming,
      yaowuleixing: yaowuleixing,
      shifoushiyong: shifoushiyong,
      chandi: chandi,
      chuchu: chuchu,
      paozhi: paozhi,
      yaoxiaoleibie: yaoxiaoleibie,
      xing: xing,
      wei: wei,
      guijing: guijing,
      duxing: duxing,
      gongneng: gongneng,
      zhuzhi: zhuzhi,
      yongfayongliang: yongfayongliang
    };
    console.log(data);
    var formData =new FormData();
    formData.append('zhongyao',JSON.stringify(data));
    formData.append('image', document.getElementById('smallfile').files[0]);
    formData.append('zhengzhuang',zhenzhuang);
    console.log(zhenzhuang);
    // 发送 POST 请求
    fetch('/zyxx/', {
      method: 'POST',
      body: formData,
    })
            .then(response => response.json())
            .then(() => {
              alert("创建成功！");
              //  window.location.href="/zyxx";
            })
            .catch(error => {
              console.log(error);
              alert("创建成功！");   //其实这个是有问题的，但是能正常创建
              //window.location.href="/zyxx";
            });

  }
  function previewImage() {
    var preview = document.getElementById('img');
    var fileDom = document.getElementById('smallfile');
    // 获取得到file 对象
    var file = fileDom.files[0]
    // 限制上传图片的大小
    if(file.size > 1024 * 1024 * 5) {
      alert('图片大小不能超过 5MB!');
      return false;
    }
    // 创建url
    var imgUrl = window.URL.createObjectURL(file)
    preview.setAttribute("src", imgUrl)
    // 更改img url 以后释放 url
    preview.onload = function() {
      console.log('图片加载成功')
      URL.revokeObjectURL(imgUrl)//安全性，释放URL
    }
  }
  function addCheck(){
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      add();
    }
  }
  function add(){
    var value = zhengzhuang.value+",";
    if(value==",")
      return;
    zhengzhuang.value="";
    showAdd.innerText=showAdd.innerText + value;
  }
  function clearShow(){
    showAdd.innerText="";
  }
  function getZhengzhuang(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/zyxx/zhengzhuang', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        jsonData = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  }
  getZhengzhuang();
  function searchData() {
    var keyword = zhengzhuang.value.trim().toUpperCase();
    var results = document.getElementById('searchResults');
    // 清空之前的查询结果
    results.innerHTML = '';
    results.style.display = 'block';
    // 遍历JSON数据，查找匹配的信息
    for (var i = 0; i < jsonData.length; i++) {
      var nameIndex=jsonData[i].mingcheng;
      if(nameIndex==null)
        continue;
      var name=nameIndex.toUpperCase();
      if (name.includes(keyword)) {
        // console.log(name);
        // 创建li元素，并将匹配的信息添加到ul标签中
        var li = document.createElement('li');
        li.textContent = nameIndex;
        li.addEventListener('click', function() {
          // 点击查询结果时，将信息装配到input标签中
          zhengzhuang.value = this.textContent;
          results.innerHTML = ''; // 清空查询结果
          results.style.display = 'none';
        });
        results.appendChild(li);
      }
    }
    document.addEventListener('click', function (event) {
      const targetElement = event.target;

      // 检查点击事件的目标元素是否位于searchResults或其子元素内，以及是否位于输入框内
      const clickedInsideSearchResults = targetElement === results || results.contains(targetElement);
      const clickedInsideSearchInput = targetElement === zhengzhuang;

      // 如果不是点击在searchResults或输入框内，隐藏searchResults
      if (!clickedInsideSearchResults && !clickedInsideSearchInput) {
        results.style.display = 'none';
      }
    });
  }
</script>